<template>
  <div 
    :class="[
      'bx-input',
      'bx-glass',
      {
        'bx-input--disabled': disabled,
        'bx-input--readonly': readonly,
        'bx-input--error': status === 'error',
        'bx-input--warning': status === 'warning',
        'bx-input--success': status === 'success',
        [`bx-input--${size}`]: size
      }
    ]"
  >
    <div v-if="prefixIcon || $slots.prefix" class="bx-input__prefix">
      <slot name="prefix">
        <BxIcon v-if="prefixIcon" :name="prefixIcon" />
      </slot>
    </div>
    
    <input
      ref="inputRef"
      v-model="inputValue"
      :type="type"
      :placeholder="placeholder"
      :disabled="disabled"
      :readonly="readonly"
      :maxlength="maxlength"
      :minlength="minlength"
      :autocomplete="autocomplete"
      class="bx-input__inner"
      @focus="handleFocus"
      @blur="handleBlur"
      @input="handleInput"
      @change="handleChange"
      @keydown="handleKeydown"
      @keyup="handleKeyup"
      @keypress="handleKeypress"
    />
    
    <div v-if="suffixIcon || $slots.suffix || clearable || showPassword" class="bx-input__suffix">
      <BxIcon 
        v-if="clearable && inputValue && !disabled && !readonly"
        name="close"
        class="bx-input__clear"
        @click="handleClear"
      />
      <BxIcon 
        v-if="showPassword && type === 'password'"
        :name="passwordVisible ? 'eye-off' : 'eye'"
        class="bx-input__password"
        @click="togglePassword"
      />
      <slot name="suffix">
        <BxIcon v-if="suffixIcon" :name="suffixIcon" />
      </slot>
    </div>
  </div>
</template>

<script>
import { ref, computed, watch, nextTick } from 'vue'
import BxIcon from '../basic/BxIcon.vue'

export default {
  name: 'BxInput',
  components: {
    BxIcon
  },
  props: {
    modelValue: {
      type: [String, Number],
      default: ''
    },
    type: {
      type: String,
      default: 'text'
    },
    size: {
      type: String,
      default: 'medium',
      validator: (value) => ['small', 'medium', 'large'].includes(value)
    },
    placeholder: {
      type: String,
      default: ''
    },
    disabled: {
      type: Boolean,
      default: false
    },
    readonly: {
      type: Boolean,
      default: false
    },
    clearable: {
      type: Boolean,
      default: false
    },
    showPassword: {
      type: Boolean,
      default: false
    },
    prefixIcon: {
      type: String,
      default: ''
    },
    suffixIcon: {
      type: String,
      default: ''
    },
    maxlength: {
      type: Number,
      default: undefined
    },
    minlength: {
      type: Number,
      default: undefined
    },
    autocomplete: {
      type: String,
      default: 'off'
    },
    status: {
      type: String,
      default: '',
      validator: (value) => ['', 'error', 'warning', 'success'].includes(value)
    }
  },
  emits: ['update:modelValue', 'focus', 'blur', 'input', 'change', 'clear', 'keydown', 'keyup', 'keypress'],
  setup(props, { emit }) {
    const inputRef = ref(null)
    const passwordVisible = ref(false)

    const inputValue = computed({
      get() {
        return props.modelValue
      },
      set(value) {
        emit('update:modelValue', value)
      }
    })

    const handleFocus = (event) => {
      emit('focus', event)
    }

    const handleBlur = (event) => {
      emit('blur', event)
    }

    const handleInput = (event) => {
      emit('input', event.target.value, event)
    }

    const handleChange = (event) => {
      emit('change', event.target.value, event)
    }

    const handleClear = () => {
      inputValue.value = ''
      emit('clear')
      nextTick(() => {
        inputRef.value?.focus()
      })
    }

    const togglePassword = () => {
      passwordVisible.value = !passwordVisible.value
      const input = inputRef.value
      if (input) {
        input.type = passwordVisible.value ? 'text' : 'password'
      }
    }

    const handleKeydown = (event) => {
      emit('keydown', event)
    }

    const handleKeyup = (event) => {
      emit('keyup', event)
    }

    const handleKeypress = (event) => {
      emit('keypress', event)
    }

    const focus = () => {
      inputRef.value?.focus()
    }

    const blur = () => {
      inputRef.value?.blur()
    }

    return {
      inputRef,
      inputValue,
      passwordVisible,
      handleFocus,
      handleBlur,
      handleInput,
      handleChange,
      handleClear,
      togglePassword,
      handleKeydown,
      handleKeyup,
      handleKeypress,
      focus,
      blur
    }
  }
}
</script>

<style scoped>
.bx-input {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: 100%;
  border-radius: var(--bx-radius-medium);
  border: 1px solid var(--bx-glass-border);
  background: var(--bx-glass-bg);
  backdrop-filter: var(--bx-glass-blur);
  transition: all var(--bx-transition-medium);
  font-family: var(--bx-font-family);
}

.bx-input:hover {
  border-color: var(--bx-glass-border-hover);
  background: var(--bx-glass-bg-hover);
}

.bx-input:focus-within {
  border-color: rgba(0, 122, 255, 0.5);
  box-shadow: 0 0 0 2px rgba(0, 122, 255, 0.1);
}

.bx-input--disabled {
  opacity: 0.6;
  cursor: not-allowed;
  background: rgba(255, 255, 255, 0.03);
}

.bx-input--readonly {
  background: rgba(255, 255, 255, 0.03);
}

.bx-input--error {
  border-color: rgba(255, 59, 48, 0.5);
}

.bx-input--error:focus-within {
  box-shadow: 0 0 0 2px rgba(255, 59, 48, 0.1);
}

.bx-input--warning {
  border-color: rgba(255, 149, 0, 0.5);
}

.bx-input--warning:focus-within {
  box-shadow: 0 0 0 2px rgba(255, 149, 0, 0.1);
}

.bx-input--success {
  border-color: rgba(52, 199, 89, 0.5);
}

.bx-input--success:focus-within {
  box-shadow: 0 0 0 2px rgba(52, 199, 89, 0.1);
}

.bx-input--small {
  height: 32px;
  font-size: 14px;
}

.bx-input--medium {
  height: 40px;
  font-size: 16px;
}

.bx-input--large {
  height: 48px;
  font-size: 18px;
}

.bx-input__inner {
  flex: 1;
  width: 100%;
  height: 100%;
  padding: 0 12px;
  border: none;
  outline: none;
  background: transparent;
  color: var(--bx-text-primary);
  font-size: inherit;
  font-family: inherit;
  line-height: 1;
}

.bx-input__inner::placeholder {
  color: var(--bx-text-tertiary);
}

.bx-input__inner:disabled {
  cursor: not-allowed;
}

.bx-input__prefix,
.bx-input__suffix {
  display: flex;
  align-items: center;
  padding: 0 8px;
  color: var(--bx-text-secondary);
}

.bx-input__prefix {
  padding-left: 12px;
  padding-right: 8px;
}

.bx-input__suffix {
  padding-left: 8px;
  padding-right: 12px;
}

.bx-input__clear,
.bx-input__password {
  cursor: pointer;
  margin-left: 4px;
  transition: color var(--bx-transition-medium);
}

.bx-input__clear:hover,
.bx-input__password:hover {
  color: var(--bx-text-primary);
}

/* 响应式设计 */
@media (max-width: 768px) {
  .bx-input--small {
    height: 30px;
    font-size: 13px;
  }
  
  .bx-input--medium {
    height: 36px;
    font-size: 15px;
  }
  
  .bx-input--large {
    height: 42px;
    font-size: 16px;
  }
}
</style>

